<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>



<!--script src="js/glisse.js"></script-->


<link href="http://fotorama.s3.amazonaws.com/4.4.9/fotorama.css"
	rel="stylesheet">
<!-- 3 KB -->
<script src="http://fotorama.s3.amazonaws.com/4.4.9/fotorama.js"></script>
<!-- 15 KB -->

<script src="js/jquery-2.1.0.js"></script>


<!-- link rel="stylesheet" href="css/glisse.css" /-->

</head>
<body>
	<div class="photogall">
		<header>
			<h2>Our Photo Gallery...</h2>
		</header>
	</div>
	<div class="fotorama" data-nav="thumbs" data-autoplay="true"
		data-keyboard="true" data-navposition="top"
		data-allowfullscreen="true" data-fit="contain" data-width="1000"
		data-maxwidth="100%" data-ratio="16/9" data-transition="slide">
		<a href="Photos/1.jpg"><img src="Photos/Thumbnails/1.jpg" width="144"
			height="96"></a> <a href="Photos/2.jpg" ><img
			src="Photos/Thumbnails/2.jpg" data-caption=""></a> <a href="Photos/3.jpg"><img
			src="Photos/Thumbnails/3.jpg"></a> <a href="Photos/4.jpg"><img
			src="Photos/Thumbnails/4.jpg"></a> <a href="Photos/22.jpg"><img
			src="Photos/Thumbnails/22.jpg"></a><a href="Photos/6.jpg"><img
			src="Photos/Thumbnails/6.jpg"></a> <a href="Photos/7.jpg"><img
			src="Photos/Thumbnails/7.jpg"></a> <a href="Photos/8.jpg"><img
			src="Photos/Thumbnails/8.jpg"></a> <a href="Photos/9.jpg"><img
			src="Photos/Thumbnails/9.jpg"></a> <a href="Photos/10.jpg"><img
			src="Photos/Thumbnails/10.jpg"></a> <a href="Photos/11.jpg"><img
			src="Photos/Thumbnails/11.jpg"></a> <a href="Photos/12.jpg"><img
			src="Photos/Thumbnails/12.jpg"></a> <a href="Photos/13.jpg"><img
			src="Photos/Thumbnails/13.jpg"></a> <a href="Photos/14.jpg"><img
			src="Photos/Thumbnails/14.jpg"></a> <a href="Photos/15.jpg"><img
			src="Photos/Thumbnails/15.jpg"></a> <a href="Photos/16.jpg"><img
			src="Photos/Thumbnails/16.jpg"></a> <a href="Photos/17.jpg"><img
			src="Photos/Thumbnails/17.jpg"></a> <a href="Photos/18.jpg"><img
			src="Photos/Thumbnails/18.jpg"></a> <a href="Photos/19.jpg"><img
			src="Photos/Thumbnails/19.jpg"></a> <a href="Photos/20.jpg"><img
			src="Photos/Thumbnails/20.jpg"></a> <a href="Photos/21.jpg"><img
			src="Photos/Thumbnails/21.jpg"></a>

	</div>
	<!-- >section>
    <ul id="gallery">
        <li id="fullPreview"></li>
        
        <li>
            <a href="Photos/8.jpg"></a>
            <img data-original="Photos/8.jpg" src="Photos/8.jpg" width="240" height="150" alt="Ocean" />
                  <div class="overLayer"></div>
            <div class="infoLayer">
                <ul>
                    <li>
                        <h2>
                            This is unnimol...
                        </h2>
                    </li>
                    <li>
                        <p>
                            View Picture
                        </p>
                    </li>
                </ul>
            </div> 
          
        </li>
          <li>
            <a href="Photos/2.jpg"></a>
            <img data-original="Photos/2.jpg" src="Photos/2.jpg" width="240" height="150" alt="Ocean" />               
          
        </li>
          <li>
            <a href="Photos/2.jpg"></a>
            <img data-original="Photos/2.jpg" src="Photos/2.jpg" width="240" height="150" alt="Ocean" />               
          
        </li>
          <li>
            
            <img data-original="Photos/3.jpg" src="Photos/3.jpg" width="240" height="150" alt="Ocean" />               
          
        </li>
          <li>
            <a href="Photos/4.jpg"></a>
            <img data-original="Photos/4.jpg" src="Photos/4.jpg" width="240" height="150" alt="Ocean" />               
          
        </li>
          <li>
            <a href="Photos/5.jpg"></a>
            <img data-original="Photos/5.jpg" src="Photos/5.jpg" width="240" height="150" alt="Ocean" />               
          
        </li>
          <li>
            <a href="Photos/6.jpg"></a>
            <img data-original="Photos/6.jpg" src="Photos/6.jpg" width="240" height="150" alt="Ocean" />               
          
        </li>
    </ul>
</section-->
	<!-- div id="testing">
<img class="pics" src="Photos/1.jpg" data-glisse-big="Photos/1.jpg" width="240" height="200" rel="group1" title="my awesome picture"/>
<img class="pics" src="Photos/2.jpg" data-glisse-big="Photos/2.jpg" width="240" height="200" rel="group1" title="wooh, another picture"/>
<img class="pics" src="Photos/3.jpg" data-glisse-big="Photos/3.jpg" width="240" height="200" rel="group1" title="my awesome picture"/>
<img class="pics" src="Photos/4.jpg" data-glisse-big="Photos/4.jpg" width="240" height="200" rel="group2" title="wooh, another picture"/>

<img class="pics" src="Photos/6.jpg" data-glisse-big="Photos/6.jpg" width="240" height="200"  rel="group2" title="my awesome picture"/>
<img class="pics" src="Photos/7.jpg" data-glisse-big="Photos/7.jpg" width="240" height="200" rel="group2" title="wooh, another picture"/>
<img class="pics" src="Photos/1.jpg" data-glisse-big="Photos/1.jpg" width="240" height="200" rel="group1" title="my awesome picture"/>
<img class="pics" src="Photos/2.jpg" data-glisse-big="Photos/2.jpg" width="240" height="200" rel="group1" title="wooh, another picture"/>
</div-->
	<!--script>
$(function () {
    $('.pics').glisse({
        changeSpeed: 550, 
        speed: 500,
        effect:'bounce',
        fullscreen: true
    }); 
});
</script-->

</body>
</html>